<script setup lang="ts">
import CommonListHeader from '@components/Common/CommonListHeader.vue';
import { reactive, onBeforeMount } from 'vue';
import { MusicList } from '@/type'
import axios from '../plugins/axiosInstance';
import { useRouter } from 'vue-router';
import { useStore } from '@store/index';
import { storeToRefs } from 'pinia';
const store = useStore()
const BaseUrl = store.getBaseUrl()
const router = useRouter();
const Active = storeToRefs(store).activeTop
let musicList = reactive<MusicList[]>([]);
onBeforeMount(async () => {
    Active.value.item = 0;
    await axios.get('/musicList/getList').then((res) => {
        if (res.data.code === 1) {
            const data = res.data.data as MusicList[];
            for (const item of data) {
                musicList.push(item);
            }
        }
    })
})
// 专辑封面的url过滤
const urlFilter: (music: MusicList) => string = (music: MusicList) => {
    if (music.image) {
        return BaseUrl + "/static/image/" + music.image;
    } else {
        return "src/assets/image/default.jpg"
    }
}

const toMusicListPage = (id: number | string) => {
    router.push({
        name: 'musicList',
        params: {
            musicListId: id,
            disableSlide: 0
        }
    })
}

const routeToMoreMusicList = () => {
    router.push("/moreMusicList");
}
</script>
<template>
    <CommonListHeader :more="routeToMoreMusicList" type="recommand" />
    <div class="list">
        <div class="music" v-for="list in musicList" @click="toMusicListPage(list.id as string)">
            <img :src="urlFilter(list)" alt="歌单封面">
            <div class="title">
                <a>{{ list.title }}</a>
            </div>
        </div>
    </div>
</template>
<style lang="css" scoped>
.list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.music {
    display: flex;
    width: var(--music-list-width);
    height: var(--music-list-height);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.music .title {
    text-decoration: none;
    font-size: 14px;
    margin-top: 5px;
    width: var(--music-list-img-size);
    height: var(--content-text-height);
    cursor: pointer;
    color: black;
}

.music a:hover {
    text-decoration: underline;
}

.music img {
    width: var(--music-list-img-size);
    height: var(--music-list-img-size);
    cursor: pointer;
}

.music-container {
    display: flex;
}
</style>
